<template>
  <!-- 后台首页 -->
  <div>
    <!-- 1. 卡片 -->
    <div class="flex jcsb">
      <el-col :span="5" v-for="value in card" :key="value.icon">
        <el-card shadow="hover">
          <div class="flex flexCsb">
            <!-- 注意：访问本地图片时url直接写在标签中没有问题，但是通过绑定属性访问data中定义的地址时，data中需要通过require()的方式加载地址 -->
            <!-- <img :src="value.src" alt="图片加载失败" /> -->
            <i :class="value.color + ' iconfont icon-' + value.icon"></i>
            <div class="tac">
              <h3 class="fs26 ccd">{{ value.h3 }}</h3>
              <b class="fs20 c33">{{ value.b }}</b>
            </div>
          </div>
        </el-card>
      </el-col>
    </div>

    <!-- 2. eCharts图表 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: [
        {
          icon: 'wenjian',
          color: 'c129',
          src: require('../../assets/images/card1.jpg'),
          h3: '总订单',
          b: '120,400'
        },
        {
          icon: 'Dollar',
          color: 'cd42',
          src: require('../../assets/images/card2.jpg'),
          h3: '总销售额',
          b: '120,400'
        },
        {
          icon: 'icon-',
          color: 'c129',
          src: require('../../assets/images/card3.jpg'),
          h3: '今日订单数',
          b: '120,400'
        },
        {
          icon: 'renminbi',
          color: 'c1af',
          src: require('../../assets/images/card4.jpg'),
          h3: '今日销售额',
          b: '120,400'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
i {
  font-size: 88px;
}

img {
  width: 88px;
  height: 88px;
}

h3,
p {
  letter-spacing: 2px;
}

h3 {
  margin-bottom: 12px;
}
</style>